// 变量
@bgColor: #f2f2f2;  // 背景色
@themeColor: #0099FF;  // 主题色
@fontColor: #6E6E6D;  // 字体色

// 公共样式
// 页面头部样式
.page-top {
    width: 100%;
    height: 60px;
    padding-left: 25px;
    background-color: @bgColor;
    // 页面头部标题
    .page-title {
        height: 100%;
        font-size: 18px;
        display: flex;
        align-items: center;
        p {
            height: 25px;
            padding-left: 10px;
            border-left: 8px solid @themeColor;
            color: @fontColor ;
        }
    }
}
// 布局内容区padding 0
.ant-layout-content{
    padding: 0;
}
// 页面内容区
.page-context{
    width: 100%;
    box-sizing: border-box;
    padding: 25px 25px 0 25px;
}

// 重置按钮样式
.reset{
    width: 100px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #409eff;
    background-color: #EBF3FE;
    color: #409eff;
    margin-right: 50px;
    &:hover{
        background-color: #409EFF;
        color: #fff;
    }
}

// 筛选按钮样式
.filter{
    width: 100px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #409eff;
    background-color: #409eff;
    color: #fff;
    &:hover{
        background-color: #66B1FF;
    }
}

//批量删除按钮
.batch-del{
    width: 80px;
    height: 35px;
    border-radius: 5px;
    border: 1px solid #F56C6C;
    background-color: #fde2e2;
    color: #F56C6C;
    margin-right: 20px;
    &:hover{
        background-color: #F56C6C;
        color: #fff;
    }
}

// 添加按钮
.add{
    width: 80px;
    height: 35px;
    border-radius: 5px;
    border: 1px solid #67c23a;
    background-color: #e1f3d8;
    color: #67c23a;
    &:hover{
        background-color: #67C23A;
        color: #fff;
    }
}

// 表格内部 编辑 修改按钮
.edit{
    width: 50px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #E6A23C;
    background-color: #FDF6EC;
    color: #E6A23C;
    margin-right: 20px;
    &:hover{
        background-color: #E6A23C;
        color: #fff;
    }
}

//  表格内部 删除
.del{
    width: 50px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #F56C6C;
    background-color: #fde2e2;
    color: #F56C6C;
    &:hover{
        background-color: #F56C6C;
        color: #fff;
    }
}

// 表格内部 商品管理
.shop-manage{
    width: 70px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #67c23a;
    background-color: #e1f3d8;
    color: #67c23a;
    margin-right: 20px;
    &:hover{
        background-color: #67C23A;
        color: #fff;
    }
}




.BuyPower {
  .page-title {
    height: 100%;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      height: 25px;
      padding-left: 10px;
      border-left: 8px solid @themeColor;
      color: @fontColor;
    }
  }
  // 刷新
  .reset-list {
    width: 100px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #409eff;
    background-color: #ebf3fe;
    color: #409eff;
    margin-right: 30px;
  }
  .reset-list:hover {
    background-color: #409eff;
    color: #fff;
  }

  // 筛选查询表格
  // .FilterQuery{
  //   width: 100%;
  //   height: 200px;
  //   .FilterQuery-s{
  //     width: 100%;
  //     display: flex;
  //     margin-bottom: 20px;
  //     .FilterQuery-title{
  //       margin-right: 20px;
  //     }
  //     .FilterQuery-content{
  //       width: 80%;
  //       display: flex;
  //       justify-content: space-around;
  //     }
      
  //   }
  // }
  .search-box{
    display: flex;
    .search-title{
        width: 100px;
        text-align: center;
    }
    .search-content{
        display: flex;
        .search-text{
            width: 100px;
            text-align: center;
            cursor: pointer;
        }
        .active{
            text-decoration: underline;
        }
    }
}



  // 数据列表表格
  .data-list {
    margin-top: 30px;
    border: 1px solid @bgColor;
    padding: 15px 25px 0 25px;
    background-color: @bgColor; // 表格固定高度

    .list-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      & > p {
        font-size: 16px;
        color: #676262;
      }

      .list-operation {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .operation-one {
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-right: 15px;
          & > p {
            margin-right: 10px;
            font-size: 14px;
            color: #676262;
          }
        }
      }

      margin-bottom: 15px;
    }

    .ant-table {
      height: 321x;
    }
    .one {
      width: 50px;
      height: 30px;
      border-radius: 5px;
      border: 1px solid #67c23a;
      background-color: #e1f3d8;
      color: #67c23a;
      margin-right: 20px;
      &:hover {
        background-color: #67c23a;
        color: #fff;
      }
    }
  }
}
.left-item{
  margin-right: 20px;
  width: 100px;
  height: 40px;
  border: 1px solid  #E47470;
  color: #E47470;
  background-color: #F9E3E2;
  border-radius: 5px;
}